<template>
	<view style="background-image: url('/static/img/me_bgp.png');background-size: contain;background-repeat: no-repeat;position: relative;">
		<view class="" style="position: absolute;top: 20px;right: 20px;">
			<image style="display: block;height: 32px;width: 32px;"
			src="/static/img/set_icon.png"
			mode="widthFix"
			@click="ulogout"
			v-if="isLogin !== ''"
		></image>
			<text v-else @click="$router.push('/pages/login/login')" style="color: white;">去登录</text>
		</view>
		
		<view class="info_box">
			<view style="z-index: 1;display: flex;align-items: center;">
				<image class="avt" src="/static/img/avt_default.png" mode="widthFix"></image>
				<view>
					<view class="tel">
						<text v-if="isLogin !== ''">{{ uid }}</text>
						<text v-else  @click="$router.push('/pages/login/login')">{{ '未登录' }}</text>
					</view>
					<view class="uid" v-if="isLogin !== ''">账号ID 213000</view>
				</view>
			</view>
			<view class="attend" style="z-index: 1;display: flex;">
				<image src="/static/img/att_star.png" mode="widthFix" style="margin-left: 20rpx;display: block;width: 54rpx;top: 10rpx;"></image>
				<view style="color: #000000;">签到</view>
			</view>
		</view>
		<view class="user_order">
			<view style="display: flex;justify-content: space-between; margin-bottom: 40rpx;background-color: white;">
				<view class="m_order">我的订单</view>
				<view class="a_order">
					全部订单
					<uni-icons type="right" color="#696969"></uni-icons>
				</view>
			</view>
			<view class="" style="display: flex;justify-content: space-between;">
				<view class="">
					<image src="/static/img/dfk.png" mode="widthFix" class="order_icon"></image>
					<view style="text-align: center;">待付款</view>
				</view>
				<view class="">
					<image src="/static/img/dfk.png" mode="widthFix" class="order_icon"></image>
					<view style="text-align: center;">待发货</view>
				</view>
				<view class="">
					<image src="/static/img/dfk.png" mode="widthFix" class="order_icon"></image>
					<view style="text-align: center;">待收货</view>
				</view>
				<view class="">
					<image src="/static/img/dfk.png" mode="widthFix" class="order_icon"></image>
					<view style="text-align: center;">评价</view>
				</view>
				<view class="">
					<image src="/static/img/dfk.png" mode="widthFix" class="order_icon"></image>
					<view style="text-align: center;">退款/售后</view>
				</view>
			</view>
		</view>
		<uni-list class="my_ulist">
			<uni-list-item class="my_items" v-for="(item, index) in list" :key="index" :title="item.title" :thumb="item.src" showArrow="true"></uni-list-item>
		</uni-list>
	</view>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
	data() {
		return {
			list: [
				{
					src:
						'',
					title: '优惠券'
				},
				{
					src:
						'',
					title: '我的收藏'
				},
				{
					src:
						'',
					title: '发票'
				},
				{
					src:
						'',
					title: '退换货'
				},
				{
					src:
						'',
					title: '服务'
				}
			]
		};
	},
	computed: {
		...mapState(['isLogin']),
		uid() {
			return localStorage.getItem('uid');
		}
	},
	methods: {
		...mapMutations(['logout']),
		ulogout() {
			uni.showModal({
				title: '注销',
				content: '确认退出登录',
				showCancel: true,
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if(res.cancel){
						uni.showToast({
							title: '已取消',
							icon:'error',
							duration:700
						});
						return;
					}
					this.logout();
					localStorage.removeItem('uid');
					uni.showToast({
						title: '退出成功',
						duration: 600
					});
					location.reload();
				},
				fail: () => {},
				complete: () => {}
			});
		}
	},
	watch: {
		// $route(nVal) {
		// 	console.log(this.$router);
		// 	if (nVal.path == '/pages/me/me') {
		// 		if (localStorage.getItem('uid') || sessionStorage.getItem('uid')) {
		// 			return;
		// 		}
		// 		this.$router.push('/pages/login/login');
		// 	}
		// }
	}
};
</script>
<style>
.my_ulist > .my_items:first-child {
	border-top-right-radius: 20rpx !important;
	border-top-left-radius: 20rpx !important;
}
.my_ulist > .my_items:last-child {
	border-bottom-left-radius: 20rpx !important;
	border-bottom-right-radius: 20rpx !important;
}
</style>
<style lang="scss">
.my_ulist {
	width: 700rpx;
	margin: 50rpx auto;
	border-radius: 20rpx;
}
.user_order {
	width: 620rpx;
	margin: 80rpx auto;
	padding: 12px 15px;
	background-color: white;
	border-radius: 20rpx;
	z-index: 3;
	.order_icon {
		display: block;
		width: 28px;
		margin: 0 auto;
		z-index: 4;
	}
	.m_order {
		font-size: 16px;
		z-index: 4;
	}
	.a_order {
		font-size: 14px;
		color: #696969;
		z-index: 4;
	}
}
.bg_circle {
	display: block;
	width: 100vw;
	position: absolute;
	z-index: 0;
	top: 0;
}
.info_box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 190rpx;
	padding-left: 40rpx;
	margin-bottom: 28rpx;
	.avt {
		width: 130rpx;
		margin-right: 30rpx;
		border-radius: 50%;
	}
	.tel {
		font-size: 34rpx;
		color: white;
	}
	.uid {
		font-size: 12px;
		color: #96e2fd;
	}
	.attend {
		width: 170rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		border-top-left-radius: 32rpx;
		border-bottom-left-radius: 32rpx;
		background: linear-gradient(133deg, #ffdbb2, #ffeedb);
	}
}
</style>
